<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>背景属性</title>
	<style>
		.box{
			height: 700px;
			width: 1400px;
			/* background-color: #0f0;
			background-image: url(./安琪拉.jpg);
			background-repeat: no-repeat;
			background-position: 10px 10px;
			background-size: cover;
			background-attachment: fixed; */
			background: #0f0 url(./安琪拉.jpg) center no-repeat;
		}
		
		.camera{
			width: 24px;
			height: 20px;
			/* background-color: #ccc; */
			background-image: url(https://pss.bdstatic.com/static/superman/img/searchbox/nicon-10750f3f7d.png);
			background-repeat: no-repeat;
			background-position: 0px -49px;
		}
		
		.camera:hover{
			background-position: 0px -73px;
		}
	</style>
</head>

<body>
	<pre>
			background属性：
				background-color	    设置元素的背景颜色。
				    color	    指定背景颜色。
				    transparent	指定背景颜色应该是透明的。这是默认
					
				background-image	    把图像设置为背景。
				    url('URL')	图像的URL   图片路径/地址
					
					
				background-repeat	    设置背景图像是否重复。
					repeat	    背景图像将向垂直和水平方向重复。这是默认
					repeat-x	只有水平位置会重复背景图像
					repeat-y	只有垂直位置会重复背景图像
					no-repeat	background-image不会重复
					
				background-position	    设置背景图像的起始位置。
				    left top
				    left center
				    left bottom
				    right top
				    right center
				    right bottom
				    center top
				    center center
				    center bottom	如果仅指定一个关键字，其他值将会是"center"
				    x% y% 表示使用百分比定位	第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。 。默认值为：0％0％
				    xpos ypos 表示使用预定义关键字定位	，第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions
				
				background-size     指定背景图片的大小
				    length	    设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
				    percentage	将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
				    cover	    此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。 短边充满盒子
				    contain	    此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。  长边充满盒子
				
				background-attachment	背景图像是否固定或者随着页面的其余部分滚动。
				  	scroll	背景图片随页面的其余部分滚动。这是默认
				    fixed	背景图像是固定的
				background      简写属性，作用是将背景属性设置在一个声明中。   
				    语法：background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
			background: red url(安琪拉.jpg) center no-repeat;
		</pre>
		
		<div class="box"></div>
		
		<div class="camera"></div>



	



	<div style="height: 500px;"></div>
</body>

</html>